<template>
  <splitpanes style="height: 90vh">
    <pane :min-size="10" :size="30">
      <div style="width: 100%; height: 98%;">
        <div style="border-bottom: 1px solid #ebeef5;">
          <el-form ref="form" :model="form" label-position="left" label-width="100px" style="width: 100%">
            <el-button-group style="margin-top: 2px; margin-left: 2px; margin-bottom: 2px;">
              <el-tooltip content="返回" placement="top" :open-delay="500">
                <el-button type="primary" icon="el-icon-back" size="mini" @click="onCancel" />
              </el-tooltip>
              <el-tooltip content="保存" placement="top" :open-delay="500">
                <el-button type="primary" size="mini" style="margin-left: 3px" @click="onSubmit"><svg-icon icon-class="save" /></el-button>
              </el-tooltip>
            </el-button-group>
            <el-tooltip :open-delay="500" content="用例编写状态" placement="top">
              <el-select v-model="treeFilter.editStatus" clearable collapse-tags placeholder="请选择用例编写状态" size="mini" style="margin-left: 3px; width: 110px;">
                <el-option v-for="item in editStatusOptions" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-tooltip>
            <el-tooltip :open-delay="500" content="优先级" placement="top">
              <el-select v-model="treeFilter.priority" clearable placeholder="请选择优先级" size="mini" style="margin-left: 3px;; width: 65px;">
                <el-option v-for="item in priorityOptions" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-tooltip>
          </el-form>
        </div>
        <div id="leftDiv" style="overflow-y: scroll; height: 100%;">
          <tree-component
            ref="treeComponent"
            catalog-label="目录"
            :element-label="eTitle"
            :default-checked-keys="selected"
            :tree-data="fullDate"
            :selected-case="testCases"
            show-checkbox
            readonly
            @choose-catalog="chooseCatalog"
            @choose-element="chooseElement"
            @data="checkData"
          />
        </div>
      </div>
    </pane>
    <pane :min-size="20" :size="70">
      <div id="rightDiv" style="overflow-y: scroll; width: 100%; height: 98%;">
        <el-tabs v-if="activeName" v-model="activeName" type="border-card" style="width: 100%;">
          <el-tab-pane v-if="activeName === 'catalog'" name="catalog" label="目录">
            <catalog-component
              ref="catalogComponent"
              :type="eType"
              :catalog-info="catalog"
              readonly
            />
          </el-tab-pane>
          <el-tab-pane v-if="activeName === 'element'" name="element" :label="eTitle">
            <test-case-view-component
              v-if="caseType === 1"
              ref="testCaseViewComponent"
              readonly
            />
            <test-case-component
              v-if="caseType === 3"
              ref="testCaseComponent"
              readonly
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </pane>
  </splitpanes>
</template>

<style>
.splitpanes__pane {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  border: 1px solid #ebeef5;
}
.splitpanes__splitter {
  width: 5px;
  margin-left: -1px
}
#leftDiv::-webkit-scrollbar, #rightDiv::-webkit-scrollbar {
  width: 0px;
}
</style>

<script>

import { findById as find_by_id, update as update_testsuit } from '@/api/functional_test/test_case_manage/review'
import { listTree as get_full_data } from '@/api/functional_test/catalog'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import TreeComponent from '@/components/functional_test/Tree/index.vue'
import CatalogComponent from '@/components/functional_test/Catalog/index.vue'
import TestCaseViewComponent from '@/components/functional_test/TestCase/view.vue'
import TestCaseComponent from '@/components/functional_test/TestCase/index.vue'
import { editStatusOptions } from '@/enum/editStatus.js'
import { priorityOptions } from '@/enum/priority.js'

export default {
  components: { Splitpanes, Pane, TreeComponent, CatalogComponent, TestCaseComponent, TestCaseViewComponent },
  data() {
    return {
      editStatusOptions, // 编写状态 options
      priorityOptions, // 优先级 options
      treeFilter: { // tree 过滤条件
        editStatus: undefined,
        priority: ''
      },
      treeData: {
        type: parseInt(this.$route.query.caseType), // 元素类型（caseType=功能测试用例 CatalogType=1，caseType=接口测试用例 CatalogType=3, ，caseType=公共步骤 CatalogType=4）
        parentId: 0,
        caseType: parseInt(this.$route.query.caseType),
        projectId: this.$store.getters.projectId
      },
      fullDate: [],
      selected: [],
      reviewId: this.$route.query.reviewId,
      testCases: [],
      value: '',
      eType: 1, // 元素类型
      eTitle: '测试用例',
      activeName: null, // 当前激活的 tab 名称
      currentCatalogId: 0, // 当前选中的 catalog ID
      catalog: {}, // catalog 对象
      caseType: this.$route.query.caseType, // 测试用例类型，1：手工用例，2：自动化用例
      form: {
        projectId: this.$store.getters.projectId,
        name: ''
      },
      isCreate: !this.$route.query.reviewId
    }
  },
  watch: {
    // tree 过滤条件变化时候调用此方法
    treeFilter: {
      handler(value) {
        this.$refs.treeComponent.filter(value)
      },
      deep: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      if (!this.isCreate) {
        // 进入编辑页
        this.initData()
      } else {
        // 获取树形结构数据
        this.form.testCases = []
        this.get_full_data(this.treeData)
      }
    },
    get_full_data(data) {
      this.treeData.caseType = this.caseType
      get_full_data(data).then(response => {
        this.fullDate = response.data
        this.$nextTick(() => {
          this.$refs.treeComponent.filter(this.treeFilter) // 懒加载 tree 数据时，调用 filter 方法过滤数据
        })
      })
    },
    initData() {
      find_by_id(this.reviewId).then(response => {
        this.form = response.data
        this.caseType = 1
        this.testCasesList = response.data.testCases
        for (var i = 0; i < this.testCasesList.length; i++) {
          this.selected.push('e-' + this.testCasesList[i].id)
        }
        this.get_full_data(this.treeData)
      })
    },
    onSubmit() {
      this.$refs.treeComponent.handleAllCheckedData() // 提交之前获取选择的数据
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.id = this.reviewId
          this.form.caseType = this.caseType
          update_testsuit(this.form).then(response => {
            this.form = response.data
            this.$message({ message: '保存成功!', type: 'success' })
            if (this.caseType === 1) { // 手工用例，跳转到功能测试套件
              this.$router.push('/functional_test/review')
            } else if (this.caseType === 3) { // 自动化用例，跳转到接口测试套件
              // this.$router.push('/interface_test/test_suite')
            }
          })
        }
      })
    },
    onCancel() {
      if (this.caseType === 1) { // 手工用例，跳转到功能测试套件
        this.$router.push('/functional_test/review')
      } else if (this.caseType === 3) { // 自动化用例，跳转到接口测试套件
        // this.$router.push('/interface_test/review')
      }
    },
    // tree：点击一个分类后调用此方法
    chooseCatalog(id) {
      this.activeName = 'catalog' // 设置当前 tab catalog
      this.currentCatalogId = this.catalog.id
      this.$nextTick(() => {
        this.$refs.catalogComponent.loadData(id)
      })
    },
    // tree：点击一个元素后调用此方法
    chooseElement(id) {
      this.activeName = 'element' // 设置当前 tab element
      this.$nextTick(() => {
        if (this.caseType === 1) {
          this.$refs.testCaseViewComponent.loadData(id)
        } else if (this.caseType === 3) {
          this.$refs.testCaseComponent.loadData(id)
        }
      })
    },
    checkData(data) {
      this.form.testCases = data
    }
  }
}
</script>
